<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定样式</title>
  <script type="text/javascript" src="../js/vue.js"></script>
  <style>
    .basic{
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .happy{
      border: 4px solid red;;
      background-color: rgba(255, 255, 0, 0.644);
      background: linear-gradient(30deg,yellow,pink,orange,yellow);
    }
    .sad{
      border: 4px dashed rgb(2, 197, 2);
      background-color: gray;
    }
    .normal{
      background-color: skyblue;
    }

    .atguigu1{
      background-color: yellowgreen;
    }
    .atguigu2{
      font-size: 30px;
      text-shadow:2px 2px 10px red;
    }
    .atguigu3{
      border-radius: 20px;
    }
  </style>
</head>
<body>

  <div id="root">
    <!-- 1.绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class ="mood" @click="changeMood">{{name}}</div>
    <!-- 2.绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->//通过shift()在控制台上模拟变化
    <div class="basic" :class ="classArr" >{{name}}</div>
    <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
    <div class="basic" :class ="classObj" >{{name}}</div>
    <!-- 3.绑定style内嵌样式--对象写法-->
    <div class="basic" :style ="styleObj" >{{name}}</div>
  </div>

</body>

<script type="text/javascript">
  Vue.config.productionTip = false
  var vm = new Vue({
    el:'#root',
    data:{
      name:'测试',
      mood:'normal',
      classArr:['atguigu1','atguigu2','atguigu3'],
      classObj:{
        atguigu1:false,
        atguigu2:false
      },
      styleObj:{
        fontsize:'50px',
        color:'red',
        backgroundColor:'orange'
      }
    },
    methods:{
      changeMood(){
        const arr = ['happy','sad','normal']
        const index = Math.floor(Math.random()*3)
        this.mood = arr[index]
      }
    }
  })
</script>
</html>